import type { ReactNode } from 'react'
import { NativeProps } from '../../utils/native-props'
import type { ListProps, ListItemProps } from '../List/type'

export type CheckListValue = string | number

export type CheckListProps = Pick<ListProps, 'mode'> & {
  /** 选中时的图标. default: `<RiStarSFill />` */
  activeIcon?: ReactNode
  /** 是否禁用checkList. default: `false` */
  disabled?: boolean
  /** 默认项. default: `[]` */
  defaultValue?: CheckListValue[]
  /** 列表右侧区域渲染函数 即选中时的图标区域. default: - */
  extra?: (active: boolean) => ReactNode
  /**
   * 是否是跳转外链. default `false`
   * if `true` 则可以省略checkListItem对应的value值
   * if `true`必须包含onClick选项
   * */
  isLink?: boolean
  /** 是否多选. default: `false` */
  multiple?: boolean
  /** 选项改变时触发. default: - */
  onChange?: (val: CheckListValue[]) => void
  /** 是否只读. default: false */
  readOnly?: boolean
  /** 选中项. default: - */
  value?: CheckListValue[]
  /** children */
  children?: ReactNode
} & NativeProps

export type CheckListItemProps = Pick<
  ListItemProps,
  /** 是否禁用. default: `false` */
  | 'disabled'
  /** 列表项中间下部的描述区域. default: - */
  | 'description'
  /** 列表项左侧区域. default: - */
  | 'prefix'
  /** 列表项中间上部的标题区域. default: - */
  | 'title'
  /** children */
  | 'children'
> & {
  /**
   * 是否是跳转外链. default `false`
   * if `true` 则可以省略checkListItem对应的`value`值
   * if `true`必须包含`onClick`选项
   * */
  isLink?: boolean,
  /** 点击选项时触发 常用于isLink === true 时提供跳转逻辑. default: - */
  onClick?: (e: React.MouseEvent<HTMLElement>) => void
  /** 是否只读. default: false */
  readOnly?: boolean,
  /** 选项值. default: - */
  value?: CheckListValue
} & NativeProps
